<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .div1{
        height: 1800px;
    }
    .p{
        height: 500px;
        width: 40%;
        float: left;
        background-color: #f4f4f4;
    }
    .w{
        height: 800px;
        width: 60%;
        float: left;
        background-color: #339900;
    }
    .caidan{
        height: 40px;
        background-color: yellow;
    }
    .hide{
        display: none;
    }
</style>
<body>
<div class="div1">
    <div class="p">
        <div class="item">
            <div class="caidan" onclick="show(this)">菜单1</div>
            <div class="con">
                <div>1111</div>
                <div>1111</div>
                <div>1111</div>
            </div>
        </div>

        <div class="item">
                <div class="caidan" onclick="show(this)">菜单2</div>
                <div class="con hide">
                    <div>1111</div>
                    <div>1111</div>
                    <div>1111</div>
                </div>
        </div>

        <div class="item">
                <div class="caidan" onclick="show(this)">菜单3</div>
                <div class="con hide">
                    <div>1111</div>
                    <div>1111</div>
                    <div>1111</div>
                </div>
        </div>
    </div>
    <div class="w"></div>
</div>
<script src="../练习/jquery-3.3.1.min.js"></script>
<script>
function show(self) {
        $(self).next().removeClass("hide");
        $(self).parent().siblings().children(".con").addClass("hide");
    }
</script>
</body>
</html>